<template>
  <div class="container">
    <h1 class="topTitle">自定义标记</h1>
    <div style="height: 600px; width: 100%">
      <l-map class="map" ref="map" :options="mapOptions" @ready="doSomethingOnReady()">
        <l-tile-layer :url="mapOptions.url"></l-tile-layer>
        <l-control-zoom position="topleft" zoom-in-title="放大" zoom-out-title="缩小"></l-control-zoom>
        <l-marker :lat-lng="marker.latlng" :icon="marker.icon" > </l-marker>
      </l-map>
    </div>
  </div>
</template>

<script>

  export default {
  name: "IconMarkerPage",
  components: {
  },
  data() {
    return {
      map:null,
      //地图参数
      mapOptions:{
        attributionControl :false,
        zoomControl:false,
        minZoom: 2,
        maxZoom: 14,
        zoom: 6,
        center: {'lon':116.404,'lat':39.915},
        preferCanvas: true,
        url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
        attribution:  '&copy; WebGis',
      },
      marker: {
        latlng: {'lon':116.404,'lat':39.915},
        icon: L.icon({
          iconUrl: 'static/marker-shield.png',
          iconSize: [32, 37],
          iconAnchor: [16, 37]
        }),
      },
      iconSize: 64,
    }
  },
  methods: {
    doSomethingOnReady() {
      this.map = this.$refs.map.mapObject
    },
  },
  computed: {
    dynamicSize () {
      return [this.iconSize, this.iconSize * 1.15];
    },
    dynamicAnchor () {
      return [this.iconSize / 2, this.iconSize * 1.15];
    }
  },
}
</script>

<style lang="stylus" scoped>
.container
  width: 100%
  h1.topTitle
    text-align: center
</style>